<template>
  <div class="picinfo">
      <h1 class="title">{{picinfo.title}}</h1>
      
      <p class="time-click">
          <span>
              发布时间：{{picinfo.add_time | comment()}}
          </span>
          <span>
              点击：{{picinfo.click}}次
          </span>
      </p>
      <template class="imgss">
        <vue-preview :slides="picUrl" @close="handleClose"></vue-preview>
      </template>
      <p>{{picinfo.content}}</p>
      <comments :id="id"></comments>
  </div>
</template>
<script>
    import comments from '../comment/comment.vue'
    export default {
        data(){
            return {
                id:this.$route.params.id,
                picinfo:[],
                picUrl:[]
            }
        },
        created(){
            this.getPicinfo()
            this.getPicUrl()
        },       
        methods:{
            getPicinfo(){
                this.$axios.get('api/getimageInfo/'+this.id).then((results)=>{
                    if(results.data.status==0){
                        this.picinfo=results.data.message[0];
                        console.log(this.picinfo)
                    }
                })
            },
            getPicUrl(){
                this.$axios.get('api/getthumimages/' + this.id).then((results)=>{
                    if(results.data.status==0){
                        results.data.message.forEach(item => {                          
                            item.msrc=item.src.replace(/http:\/\/vue.studyit.io\//,'http://www.lovegf.cn:8899/'),
                            item.src=item.src.replace(/http:\/\/vue.studyit.io\//,'http://www.lovegf.cn:8899/'),
                            item.w=600,
                            item.h= 400
                        });
                    }
                    this.picUrl=results.data.message
                })
            },
             handleClose () {
                console.log('close event')
            }
        },
        components:{
            comments
        }
    }
</script>
<style lang="scss" scoped>
    .picinfo{
        padding: 0 10px;
        .title{
            font-size: 20px;
            text-align: center;
            padding: 10px 50px;
        }
        .time-click{
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            color: rgb(12, 104, 209);
        }
    }
    [data-v-6cad533e] /deep/ figure {
        margin: 1em 20px;
        img{
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 0 8px #333
        }
    }
</style>
